<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>后台管理</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		
		<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/css/fileinput.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
		
		<link rel="stylesheet" type="text/css" th:href="@{/css/backindex.css}">
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="leftslidebar">
			<h3 class="brand"><img th:src="@{/img/logomanager.png}" class="logo" alt="">FaceFun</h3>
			<ul class="nav nav-stacked">
			  <li role="presentation"><a th:href="@{/admin/cartoon}"><span class="glyphicon glyphicon-picture"></span>&nbsp;&nbsp;漫画管理</a></li> 
			  <li role="presentation" class="active"><a href="@{/admin/user}"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
			</ul>
		</div>


		<div class="content">
			<div th:replace="back/cartoon :: navbar"></div>
			
			<ol class="breadcrumb">
			  <li  class="active">用户管理</li>
			</ol>
			
			<div class="well">
			
				
				<div class="panel panel-default">
					<div class="panel-body">
						<table id="example" class="table table-hover" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>头像</th>
									<th>用户名</th>
									<th class="sex">性别</th>
									<th>电话</th>
									<th>注册时间</th>
									<th>个人介绍</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
				
			</div>

		</div>
		<div id="Modal" class="modal fade">
		  
		</div>
		

		<!-- jQuery -->
		 <script src="//code.jquery.com/jquery-1.12.4.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

		<script th:src="@{/js/backindex.js}" type="text/javascript"></script>

		<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>

		<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>

		
		<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js"></script>

		<script type="text/javascript">
			
		
		$(document).ready(function() {
		   
			    var table=$('#example').DataTable({
			    	"language":  {
			    		"url":"//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json"			
			        },
			        dom:'<"top">t<"bottom"ip>',
			    	"displayLength":10,
			    	"ordering":false,
					"pagingType": "simple_numbers",
					 "serverSide": true,
			        "ajax": {
			        	"url":"/user/list",
			        	"type":"POST",
			        	"dataType": "json"},
			        "columns": [
			        	{ "data": "headimg",
			        		"render": function (data) {
			                    return '<img src="'+data+'" width="60px" height="60px" class="img-circle"/>';
			                }
			        	},
			            { "data": "name" },
			            { "data": "sex",
			        		"render": function (data) {
			                    return data?'男':'女';
			                } },
			            { "data": "tel"},
			            { "data": "registDate"},
			            {"data": "info"}]
			    });
			   
			    
			   
			    
				
			} );
		</script>
	</body>
</html>